<template>
  <div class="order-return-container">
    <div id="order" class="order" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getOrderList } from '@/utils/mockOrder'
export default {
  mixins: [],
  data() {
    return {
      msg: 'hello world'
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const orderList = getOrderList()
    const date = orderList.map(ele => ele.date)
    const orderData = orderList.map(ele => ele.order)
    const returnData = orderList.map(ele => ele.returnOrder)
    const orderEchart = echarts.init(document.getElementById('order'))
    const option = {
      title: {
        text: '订单退单柱状图',
        textStyle: {
          color: '#9aa8d4',
          fontSize: 18
        }
      },
      tooltip: {
        backgroundColor: 'rgba(0,0,0,.5)',
        textStyle: {
          color: '#fff'
        },
        formatter: '{a}<br />{b}:{c}'
      },
      legend: {
        bottom: 10
      },
      xAxis: {
        name: '日期',
        // 所有类目名称列表
        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        data: date,
        axisLabel: {
          rotate: 30
        }

      },
      yAxis: {
        axisLine: {
          show: true
        },
        axisLabel: {
          show: true
        },
        axisTick: {
          show: true
        }
      },
      series: [
        {
          name: '订单',
          type: 'bar',
          // data: [10, 20, 30, 40, 50, 60, 70]
          data: orderData,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: '#bc04e4' }, // 0% 处的颜色
                { offset: 0.5, color: '#b701fe' }, // 50% 处的颜色
                { offset: 0, color: '#8105e4' } // 100% 处的颜色

              ],
              global: false // 缺省为 false
            }
          }
        },

        {
          name: '退单',
          type: 'bar',
          // data: [1, 2, 3, 4, 5, 6, 7]
          data: returnData,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 1, color: '#2493ff' }, // 0% 处的颜色
              { offset: 0.5, color: '#24a1ff' }, // 50% 处的颜色
              { offset: 0, color: '#24caff' } // 100% 处的颜色

            ],
            global: false // 缺省为 false
          }
        }

      ],
      animationEasing: 'elasticOut',
      animationDurationUpdate: function(idx) {
        // 越往后的数据时长越大
        return idx * 5
      }
    }
    orderEchart.setOption(option)
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.order-return-container{
  width: 100%;
  height: 100%;
  .order{
    width: 100%;
    height: 100%;
  }
}
</style>
